@charset "utf-8";
@import "animate";
$font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
html,body{
	height: 100%;
	width: 100%;
	font-size: 16px;
	font-family: $font-family;
}
*{
	margin: 0;
	padding: 0;
	border: 0 none;
	//box-sizing: border-box;
}
/*滚动条*/
::-webkit-scrollbar {
    width:6px;
    height:6px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece{
	background-color: #777;
	box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: #222;
}

aside{
  width: 10%;
  min-width: 10rem;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  background-color: grey;
  transition: left 1s;
  .arrow{
    opacity: 0;
    display: inline-block;
    position: absolute;
    right: -0.5rem;
    top: calc(50% - 2rem);
    background-color: transparent;
    &:hover{
      cursor: pointer;
    }
    i{
      font-size: 2rem;
      color: white;
    }
  }
}

main{
  height: 100%;
  float: right;
  background-color: #333;
  width: 90%;
  header{
    width: 100%;
    height: 5rem;
    background-color: #999;
    nav{
      width: 80%;
      height: 100%;
      float: right;
      display: flex;
      justify-content:space-around;
      a{
        width: 5rem;
        height: 100%;
        line-height: 5rem;
        text-decoration: none;
        text-align: center;
        &:visited{
          color:inherit;
        }
      }

    }
  }
  article{
    height: calc(100% - 5rem);
    width: 100%;
    background-color: #222;
  }
}

@import "mediaquery";
